<script setup lang='ts'>import { ref } from 'vue';

const props = defineProps<{
    text: string
}>()
const closeRef = ref<HTMLElement>()
const toggleClose = () => {
    (closeRef.value as HTMLElement).classList.toggle('show')
}
const emit = defineEmits(['close-his-item'])
const close = () => {
    emit('close-his-item', props.text)
}
</script>
<template>
    <div class="histories-item" @mouseenter="toggleClose" @mouseleave="toggleClose">
        <div class="histories-text">{{text}}</div>
        <div class="close" ref="closeRef" @click="close">
            <svg viewBox="0 0 1024 1024" width="14" height="14">
                <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                    0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                    447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                    12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                    9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                    c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                    c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                    c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                    l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                    0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z">
                </path>
            </svg>
        </div>
    </div>
</template>
<style lang='less' scoped>
.histories-item {
    position: relative;
    box-sizing: border-box;
    height: 30px;
    font-size: 12px;
    padding: 7px 10px 8px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: var(--graph_bg_thin);
    border-radius: 6px;
    cursor: pointer;

    &:hover {
        color: skyblue;
    }

    .histories-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 96px;
    }

    .show {
        display: block !important;
    }

    .close {
        display: none;
        position: absolute;
        box-sizing: border-box;
        width: 16px;
        height: 16px;
        top: -6px;
        right: -6px;
        padding: 2px;

        svg {
            width: 14px;
            height: 14px;
            fill: #ccc;
        }
    }
}
</style>